<template>
    <div class="container block">
        <div class="table">
            <el-table
                :data="tableData"
                style="width: 100%"
                :header-row-style="{ color: '#202536' }"
                :row-style="{ color: '#5E617D' }"
            >
                <el-table-column label="操作类型">
                    <template #default="scope">
                        <div>
                            {{
                                scope.row.status == 0 ? '账户充值' : scope.row.status == 1 ? '账户充值' : scope.row.status == 3 ? '已提现' : scope.row.status == 4 ? '账户转出' : scope.row.status == 5 ? '账户转入' : '账户充值'
                            }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="操作时间"/>
                <el-table-column label="操作金额">
                    <template #default="scope">
                        <div>
                            ¥{{ scope.row.rechargeAmount }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作方式">
                    <template #default="scope">
                        <div>
                            {{ scope.row.payMode == 1 ? '公对公' : scope.row.payMode == 2 ? '微信' : '--' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="idCardNo" label="查看凭证">
                    <template #default="scope">
                        <div>
                            <el-image
                                v-if="scope.row.voucherUrl && scope.row.payMode == 1"
                                style="width: 38px; height: 38px"
                                :src="scope.row.voucherUrl"
                                :zoom-rate="1.2"
                                :preview-src-list="[scope.row.voucherUrl]"
                                :initial-index="4"
                                fit="cover"
                            />
                            <div v-else>--</div>
                        </div>
                    </template>
                </el-table-column>
                <!-- voucherUrl -->
                <el-table-column label="操作状态">
                    <template #default="scope">
                        <div
                            :class="['color-green',scope.row.status == 0 ? 'color-red' : '',scope.row.status == 2 ? 'color-red' : '']">
                            {{
                                scope.row.status == 0 ? '审核中' : scope.row.status == 1 ? '充值成功' : scope.row.status == 3 ? '已提现' : scope.row.status == 4 ? '转出成功' : scope.row.status == 5 ? '转入成功' : '已驳回'
                            }}
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                class="pagination"
                v-model:currentPage="pageNum"
                v-model:page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="getBillRecord"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { BillDto } from '@/api/bill'
import { billRecord } from '@/api/insure-deduction'

export default defineComponent({
    name: 'InsureBill',
    data() {
        return {
            pageSize: 10, // 每页显示十条
            pageNum: 1, // 页数为1
            total: 0, // 总的为0
            tableData: [] as BillDto[] // 如同BillDto的数据
        }
    },
    created() { // 创建
        this.getBillRecord()
    },
    methods: {
        async getBillRecord() {
            const result = await billRecord({
                pageNum: this.pageNum,
                pageSize: this.pageSize
            })
            console.log(result, 'result')
            this.total = result.totalCount
            this.tableData = result.list
        },
        handleSizeChange() {
            this.pageNum = 1
            this.getBillRecord()
        }
    }
})
</script>
<style lang="stylus" scoped>
table()
.block {
    padding: 0px 24px
}

:deep() .month-picker
    position relative
    top -10px
    left 0
    margin-top -10px
    font-size 15px

:deep() .el-input--prefix .el-input__inner
    padding-right 0
    background white
    border unset
    position relative

.tab-img
    width 38px
    height 38px
</style>
